<template>
  <div class="box">
    <div class="top">
      <span class="top_border"></span>
      <span class="corner lt"></span>
      <span class="icon"></span>
      <span class="title">{{ title }}</span>
    </div>
    <div class="bottom">
      <span class="bottom_border"></span>
      <span class="corner lb"></span>
      <span class="corner rt"></span>
      <span class="corner rb"></span>
      <div class="content">
         <template v-for="index in 8" :key="index">
          <template v-if="index%3 == 0" >
            <div class="item"><span> {{ index <= refNumber.length? refNumber[index-1]:'' }} </span></div>
            <div class="separator"><span>,</span></div>
          </template>
          <template v-else>
            <div class="item"><span> {{ index <= refNumber.length? refNumber[index-1]:''}} </span></div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue';
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  number: {
    type: Number,
    default: 1346529
  }
});
const refNumber = ref([0, 0, 0, 0, 0, 0, 0]);
watch(() => props.number, v => {
  if (v !== undefined) {
    refNumber.value = v.toString().split('').reverse();
  }
}, { immediate: true });

</script>
<style lang="less" scoped>
.box {
  color: white;
  padding-top: 3px;
  .corner {
    padding: 0.75rem;
    border-color: var(--cornerColor);
    border-style: solid;
    position: absolute;
  }
  .top {
    padding-left: 1px;
    background-color: var(--boxBgColor);
    height: 1.25rem;
    width: 10.125rem;
    position: relative;
    z-index: 9;
    box-shadow: -2px 0px 0px var(--boxBoderColor);
    filter: drop-shadow(0.25rem 0px 0px var(--boxBoderColor));
    background: linear-gradient(
        226deg,
        transparent 0.875rem,
        var(--boxBgColor) 0
      )
      top right;
    .top_border {
      top: -3px;
      padding: 0 3.5rem;
      border-color: var(--boxBoderColor);
      border-style: solid;
      position: absolute;
      border-width: 0 0 var(--boxBorderWidth) var(--boxBorderWidth);
    }
    .title {
      height: 2.75rem;
      line-height: 2.75rem;
      width: 100%;
      text-align: start;
      font-size: var(--titleFontSize);
      font-weight: 400;
      color: #ffffff;
    }
    .icon {
      padding: 3px;
      background-color: #84daff;
      box-shadow: 0px 0px 0.375rem 1px rgba(132, 218, 255, 0.6);
      border-radius: 0.25rem 0.25rem 0.25rem 0.25rem;
      opacity: 1;
      margin-left: -1rem;
      margin-right: 0.625rem;
    }
    .lt {
      left: 0px;
      top: -3px;
      border-width: var(--boxBorderWidth) 0 0 var(--boxBorderWidth);
    }
  }
  .bottom {
    background-color: var(--boxBgColor);
    border: var(--boxBorderWidth) solid var(--boxBoderColor);
    border-top-width: 0;
    height: calc(100% - 1.25rem);
    width: 100%;
    padding: 0px 0px 0px 0px;
    position: relative;
    .bottom_border {
      top: -3px;
      right: 1.375rem;
      padding: 0 73px;
      border-color: var(--boxBoderColor);
      border-style: solid;
      position: absolute;
      border-width: 0 0 var(--boxBorderWidth) var(--boxBorderWidth);
    }
    .lb {
      left: -3px;
      bottom: -3px;
      border-width: 0 0 var(--boxBorderWidth) var(--boxBorderWidth);
    }

    .rt {
      right: -3px;
      top: -3px;
      border-width: var(--boxBorderWidth) var(--boxBorderWidth) 0 0;
    }

    .rb {
      right: -3px;
      bottom: -3px;
      border-width: 0 var(--boxBorderWidth) var(--boxBorderWidth) 0;
    }
  }
}

.content {
  width: calc(100% - 1rem);
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  padding-top: 0.375rem;
  margin: 0 0.5rem 0 0.5rem;
  .item {
    background: linear-gradient(to top, #0e28404d, #ffffff4d, #6f4b7a4d);
    width: 10%;
    height: 65.8%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    span {
      font-size: 1.875rem;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
    }
  }

  .separator {
    height: 80%;
    display: flex;
    align-items: flex-end;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-size: 1.25rem;
  }
}
</style>
